<!-- components/product-list/product-list.vue -->
<template>
  <view class="product-list">
    <view class="section-title" v-if="title">
      <text class="title-text">{{ title }}</text>
    </view>
    <view class="product-grid">
      <view 
        class="product-item margin-sm"
        v-for="(item, index) in productList"
        :key="index"
        @click="$api.toPage(`/sub-home/pages/goods-detail/goods-detail?id=${item.id}`)"
      >
        <image 
          :src="item.image" 
          mode="aspectFill" 
          class="product-image"
        />
        <view class="product-info">
          <view class="product-title text-bold">{{ item.title }}</view>
          <view class="product-price-box">
            <view class="price">
              <text class="symbol">¥</text>
              <text class="amount">{{ item.price }}</text>
            </view>
            <view class="sold">已售{{ item.sold }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'product-list',
  props: {
    title: {
      type: String,
      default: '每日精选好物'
    },
    productList: {
      type: Array,
      default: () => []
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.product-list {

  background-color: #f8f8f8;
}

.section-title {
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #292421;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 30rpx;
      background-color: #FF4945;
      border-radius: 3rpx;
    }
  }
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 确保项目之间有间距 */
}

.product-item {
  background: #ffffff;
  width: calc(46% - 12rpx); /* 自适应宽度，减去间距 */
  height: 442rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx; /* 添加底部间距 */
  position: relative;
  
  &:active {
    transform: scale(0.98);
  }
}

.product-image {
  width: 100%;
  height: 282rpx;
  background-color: #f5f5f5;
}

.product-info {
  padding: 16rpx;
}

.product-title {
  font-size: 28rpx;
  color: #292421;
  line-height: 36rpx;
}

.product-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 10rpx;
  width: calc(100% - 32rpx); /* 确保价格框宽度适应 */
}

.price {
  display: flex;
  align-items: baseline;
  color: #FF4945;
  
  .symbol {
    font-size: 28rpx;
    margin-right: 2rpx;
    color: #FF1712;
  }
  
  .amount {
    font-size: 36rpx;
    font-weight: bold;
  }
}

.sold {
  font-size: 20rpx;
  color: #ACACAC;
}
</style>